<template>
  <div class="pad-out-box">
    <form-common :filed-list="clientInfoFiledNewList" ref="form" @selectChange="selectChange"></form-common>
    <div class="margin-top-40">
      <el-steps direction="vertical" :space="70" align-center>
        <el-step v-for="item in model.contractList || []" :key="item.primaryKey">
          <div slot="description">
            <div class="flex align-center justify-between">
              <div class="flex">
                <div style="width: 400px">
                  <span class="color-333333 font-size-16">{{ item.contractBeginDate | formatDateTime('YYYY-MM') }}</span>
                  <span class="color-333333 font-size-16">至</span>
                  <span class="color-333333 font-size-16">{{ item.contractEndDate | formatDateTime('YYYY-MM') }}</span>
                </div>
                <div class="color-333333 font-size-16" style="width: 500px">{{ item.contractName }}</div>
                <div class="color-333333 font-size-16">{{ getStatusName(item.contractStatus) }}</div>
              </div>
              <el-button type="primary" size="mini" @click="goInfo(item)">查看合同</el-button>
            </div>
          </div>
        </el-step>
      </el-steps>
    </div>
  </div>
</template>
<script>
  import formCommon from '@g/components/form/formCommon.vue';
  import { clientInfoFiledNewList } from './form';
  import Api from '../../api/clientManage';
  import { requestTips, askDialog } from '@/common/js/utils.js';

  export default {
    data() {
      return {
        clientInfoFiledNewList: clientInfoFiledNewList,
        model: {},
        statusList: [
          {
            dictKey: '0',
            dictValue: '草稿',
          },
          {
            dictKey: 1,
            dictValue: '审批中',
          },
          {
            dictKey: 2,
            dictValue: '履行中',
          },
          {
            dictKey: 3,
            dictValue: '驳回',
          },
          {
            dictKey: 4,
            dictValue: '履行完毕',
          },
          {
            dictKey: 5,
            dictValue: '已废止',
          },
        ],
      };
    },

    mounted() {
      this.getTagList();
      this.getClientInfo();
    },

    methods: {
      //客户信息
      async getClientInfo() {
        let res = await Api.customerDetail({ customerKey: this.$route.query.customerKey });
        this.model = res;
        this.$refs.form.initModel();
        this.setFiledVal(clientInfoFiledNewList, res);
      },

      //标签
      async getTagList() {
        let res = await Api.customerTagLIst();
        this.clientInfoFiledNewList.forEach(item => {
          if (item.bindFieldName == 'tagList') {
            item.optionList = res.rows || [];
          }
        });
      },

      //保存标签
      async saveTags(tagKeyList) {
        let res = await Api.customerTagCreate({
          customerKey: this.$route.query.customerKey,
          tagKeyList: tagKeyList,
        });
        requestTips(res, () => {});
      },

      selectChange(data) {
        if (data.filedName == 'tagList') {
          this.saveTags(data.filedVal);
        }
      },

      //字段回显
      setFiledVal(list, row) {
        list.forEach(item => {
          for (let i in row) {
            if (i == item.bindFieldName) {
              item.bindFieldVal = row[i];
            }
          }
        });
      },

      //详情
      goInfo(row) {
        let param = {
          contractType: row.contractType,
          contractCode: row.contractCode,
          contractKey: row.primaryKey,
          contractCategory: row.contractCategory,
          headerName: '合同管理',
        };
        let pathUrl = {
          name: 'contract-info',
          query: param,
        };
        let { href } = this.$router.resolve(pathUrl);
        let windowName = 'contractManageToInfo';
        window.open(href, windowName);
      },

      getStatusName(value) {
        let [obj] = this.statusList.filter(item => item.dictKey == value);
        return obj ? obj.dictValue : '';
      },
    },

    components: { formCommon },
  };
</script>
<style scoped type="scss">
  ::v-deep .el-form .el-form-item__label {
    padding-left: 0;
  }
  ::v-deep .el-step__head {
    margin-top: 5px;
  }
  ::v-deep .el-step__description {
    padding-right: 0;
  }
</style>
